<template>
    <div class="emb-guide-table">
        <table v-if="table.length">
            <thead>
                <tr>
                    <th>Garment part</th>
                    <th v-if="showArea">Embroidery Area</th>
                    <th>Embroidery Frames</th>
                    <th>Position</th>
                </tr>
            </thead>
            <tbody>
                <template v-for='(group, gIndex) in table'>
                    <template v-for='(parent, pIndex) in group'>
                        <tr v-for="(child, cIndex) in parent.children"
                            :key="`${parent.surface_name}-${gIndex}-${pIndex}-${cIndex}`">
                            <td v-if="cIndex == 0 && pIndex == 0" :rowspan="getGroupRowSpan(group)" class="primary">
                                {{ parent.mappingName }}
                            </td>
                            <td v-if="showArea && cIndex == 0" :rowspan="getGroupRowSpan(group) / group.length">
                                {{ getPieceName(parent.canvas_name) }}
                            </td>
                            <td>{{ child.width / 300 }}" x {{ child.height / 300 }}" </td>
                            <td v-if="cIndex == 0" style="background-color: #fff"
                                :rowspan="getGroupRowSpan(group) / group.length">
                                <button :class="{ active: activeDesign && activeDesign.id == parent.id }"
                                    @click="setActivePrint(parent)">
                                    view
                                </button>
                            </td>
                        </tr>
                    </template>
                </template>
            </tbody>
        </table>
    </div>
</template>
<script>
export default {
    name: "DetailGuideTable",
    props: ['list', 'activePiece', 'classify'],
    data () {
        return {
            data: {},
            table: [],
            surfaceNameMapping: {
                "Front Side": "Front",
                "Back Side": "Back",
                "Sleeve Left": "Left Sleeve",
                "Sleeve Right": "Right Sleeve",
                "Long Sleeve Left": "Sleeve Left",
                "Long Sleeve Right": "Sleeve Right",
                "Neck Label Inner": "Inside Neck Label",
            }
        }
    },
    watch: {
        list: {
            handler: function (v) {
                if (v) this.table = this.list;
            }, immediate: true
        }
    },
    computed: {
        activeDesign: {
            get () {
                return this.activePiece ?? null
            },
            set (v) {
                this.$emit('update:activePiece', v)
            }
        },
        showArea () {
            const keys = ['pants', 'shorts']
            return !!keys.includes(this.classify)
        }
    },
    methods: {
        getGroupRowSpan (group) {
            let result = 0
            for (let item of group) result += item.children.length;
            return result
        },
        getPieceName (key) {
            const names = {
                'Front Side - Left Leg': 'Left Leg',
                'Front Side - Right Leg': 'Right Leg',
                'Back Side - Left Leg': 'Left Leg',
                'Back Side - Right Leg': 'Right Leg',
            }

            return names[key] || key

        },
        setActivePrint (design) {
            this.activeDesign = design;
        },
    },
    mounted () {

    },
}
</script>
<style scoped lang="scss">
.emb-guide-table {
    table {
        width: 496px;
        height: 550px;

        td,
        th {
            padding: 0 6px;
            border: 1px solid #e6e6e6;
        }

        th {
            min-width: 100px;
            height: 38px;
            background: #f6f6f6;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 12px;
            color: #000000;
            line-height: 14px;

            &:nth-child(1) {
                width: 120px;
            }
        }

        tbody {
            tr {
                background: #fff;

                &:nth-child(2n) {
                    td {
                        background: #fafafa;
                    }
                }

                td {
                    height: 16px;
                    font-size: 12px;
                    font-family: Roboto-Regular, Roboto;
                    color: #000000;
                    font-weight: 400;
                    line-height: 16px;

                    &.primary {
                        background-color: #fff;
                        font-family: Roboto-Medium, Roboto;
                        font-weight: 500;
                        color: #000000;
                        font-size: 12px;
                        line-height: 16px;
                    }

                    text-align: center;

                    button {
                        position: relative;
                        padding: 0;
                        border: none;
                        height: auto;
                        font-size: 12px;
                        font-weight: 400;
                        color: #555555;
                        line-height: 16px;
                        text-decoration: underline;

                        &:hover {
                            color: #ea4c89;
                        }

                        &.active {
                            color: #ea4c89;
                            text-decoration: none;

                            &::after {
                                content: "";
                                position: absolute;
                                border: 4px solid transparent;
                                border-left: 7px solid #ea4c89;
                                right: -100%;
                                top: 50%;
                                transform: translateY(-50%);
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
